<template>
  <main>

    <dg-header :btns="btns" @btnAct="btnAct" />

    <am-container>
      <article class="dg-art">
        <am-row>

          <!-- 头像、名称、标签 -->
          <am-col :span="12">
            <am-row>
              <div class="am-u-sm-4 am-u-md-2">
                <am-image custom-class="am-center am-margin-bottom-sm am-center"
                  v-lazy="static_pic + designer.headImagePath"
                  :src="''"
                  :responsive="true"
                  :round="true" alt=""/>
              </div>
              <div class="am-u-sm-8 am-u-md-10">
                <div class="am-margin-bottom am-sm-only-text-center">
                  <h1>{{ works.name }} BY {{ designer.name }}</h1>
                  <p>
                    <span v-for="(sub, index) in worksTag" :key="index">
                      {{ sub.name }} / 
                    </span>
                  </p>
                </div>
              </div>
            </am-row>
          </am-col>

          <!-- 轮播图 -->
          <am-col :span="12">
            <v-touch tag="div" @swipeleft="nextImg" @swiperight="preImg" style="position: relative;">
              <!-- slide-down -->
              <a :href="static_pic + curCarPath" target="_blank">
                <am-image custom-class="am-margin-bottom-sm" v-if="carImgShow"
                  v-lazy="static_pic + curCarPath"
                  :src="''"
                  :responsive="true"
                  @click="imgClick($event)" />
              </a>
              <ul class="dg-direction-nav">
                <li class="dg-nav-prev"><a class="dg-prev" href="javascript:;" @click="preImg"></a></li>
                <li class="dg-nav-next"><a class="dg-next" href="javascript:;" @click="nextImg"></a></li>
              </ul>
            </v-touch>
            <carousel :isNeedCar="true" :isThumbnail="true" :carImgs="carImgs" :carImgIndex.sync="carImgIndex" />
          </am-col>

          <!-- 操作 -->
          <am-col :span="12" v-if="works.status === '2'">
            <div class="am-fr">
              <am-button-group custom-class="am-margin">
                <am-button @click="vote" :disabled="voteAbled">投一票（{{ works.poll }}）</am-button>
                <am-button @click="share.weibo()">微博分享</am-button>
                <am-button @click="share.weixin()">微信分享</am-button>
                <am-button>[可补充]</am-button>
              </am-button-group>
            </div>
          </am-col>

          <!-- 详细信息 -->
          <am-col :span="12">
            <am-row>

              <div class="am-u-sm-12 am-u-md-8">
                <p>
                  作品介绍：{{ works.introduction }}
                </p>
                <!-- <p>
                  业主信息：{{ works.ownerName }}，{{ works.ownerAddress }}，{{ works.ownerTel }}
                </p>
                <p>
                  设计师联系电话：{{ designer.tel }}
                </p> -->
              </div>

              <div class="am-u-sm-12 am-u-md-4">
                <!-- 二维码 -->
                <div class="am-fr">
                  作品全景图
                  <a :href="qartConfig.value" target="_blank">
                    <!-- <vue-q-art :config="qartConfig"></vue-q-art> -->
                    <qr-code :text="qartConfig.value"></qr-code>
                  </a>
                </div>
              </div>
            </am-row>
          </am-col>

          <!-- 门店信息 -->
          <am-col :span="12">
            <am-row>
              <am-col :span="12">
                <h2>门店信息</h2>
              </am-col>

              <div class="am-u-sm-6 am-u-md-3">
                <am-image :responsive="true" v-lazy="thumbnail + store.storeMainPic" :src="''" />
                <p>门头照</p>
              </div>

              <div class="am-u-sm-6 am-u-md-3" v-if="storePic" v-for="(item, index) in storePic" :key="index">
                <am-image :responsive="true" v-lazy="thumbnail + item" src="''" />
                <p>店面图{{ index + 1 }}</p>
              </div>

              <div class="am-u-sm-12">
                <h3>地址：{{ store.address }}</h3>
                <bd-map
                  :pageCapacity="1"
                  :center="store.province"
                  :location="store.city"
                  :keyword="store.address" />
              </div>
            </am-row>
          </am-col>


          <!-- 设计师其他作品 -->
          <am-col :span="12">
            <am-row>
              <am-col :span="12">
                <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
                <h2>设计师其他作品</h2>
              </am-col>

              <div class="am-u-sm-6 am-u-md-3" v-for="(works, index) in otherWorks" :key="index">
                <router-link :to="'/worksDetail/' + works.id"></router-link>
                <am-image v-lazy="thumbnail + works.mainPic" :responsive="true"  :src="''" />
                <p>{{ works.name }}</p>
              </div>
            </am-row>
          </am-col>
        </am-row>
      </article>
    </am-container>

    <am-alert :is-show.sync="alertVisible" title="提示" submit-btn-text="关闭" @submit="alertVisible = false">
      <h6>{{ alertMsg }}</h6>
    </am-alert>
    <!-- 底部 -->
       <dg-footer />
  </main>
</template>

<script>
import Vue from 'vue'
import VueQArt from 'vue-qart'
import DgHeader from '@/dg_components/DgHeader'
import Carousel from '@/components/Carousel'
import BdMap from '@/components/BdMap'
import SimpleShare from '@/assets/simple-share.js'
import QrCode from '@/components/QrCode'
import DgFooter from '@/views2/Footer'// 底部

export default {
  name: 'works-detail',
  data() {
    return {
      carImgShow: true,
      alertMsg: '',
      alertVisible: false,
      voteAbled: false,
      carImgs: [],
      carImgIndex: 0,
      worksID: this.$route.params.worksID,
      qartConfig: {// 二维码信息
        value: '',// this.works.panoramaUrl
        imagePath: '/static/star.png',
        filter: 'color',// threshold 黑白
      },
      share: {},

      // ***
      designer: {},
      works: {},
      worksPic: [],
      worksTag: [],
      otherWorks: [],
      store: {
        province: '',
        city: '',
        address: ''
      },
      storePic: [],


      /**
       * 
       */
      funs: {
        'goback': this.goback
      },
      btns: [{
        name: '返回上一级',
        act: 'goback'
      }],
    }
  },
  computed: {
    carImgsNum() {
      return this.carImgs.length;
    },
    curCarPath() {
      if(!this.carImgs[this.carImgIndex]) {
        return '';
      }
      return this.carImgs[this.carImgIndex].path;
    }
  },
  components: {
    Carousel, VueQArt, BdMap, QrCode,
    DgHeader,
    DgFooter
  },
  methods: {
    async ready() {
      await this.loadData();
      this.mergePic();
      this.initShare();
    },
    loadData() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETWORKSDSG, {
          worksID: +this.worksID
        }).then(res => {
          this.designer = res.data.data.designer;
          this.works = res.data.data.works;
          this.worksPic = res.data.data.worksPic;
          this.worksTag = res.data.data.worksTag;
          this.otherWorks = res.data.data.otherWorks;
          this.store = res.data.data.store;
          this.storePic = res.data.data.storePic.slice(0, 3).map(item => item.pic);
          // =====
          this.qartConfig.value = this.works.panorama || '';
          // this.qartConfig.imagePath = this.designer.headImagePath;
          resolve()
        }).catch(err => {
          this.$message({
            title: '发生错误',
            type: 'error',
            message: err.msg,
            closeable: true
          });
          reject();
        });
      });
    },
    /**轮播图格式 */
    mergePic() {
      this.carImgs = [{
        path: this.works.mainPic, id: -1
      }].concat(this.worksPic.map(item => {
        return {
          path: item.pic, id:　-1
        };
      }));
    },
    /**投票 */
    vote() {
      this.dgpost(this.api.VOTEWORKS, {
        gameID:	+this.$store.getters.gameID,
        worksID: +this.worksID,
        ip: this.$store.state.IPv4
      }).then(res => {
        this.works.poll++;
        this.voteAbled = true;
      }).catch(err => {
        this.voteAbled = true;
        this.alertVisible = true;
        this.alertMsg = err.msg;
      });
    },
    /**初始化分享信息 */
    initShare() {
      this.share = new SimpleShare({
        url: window.location.href,
        title: 'title',
        content: 'content',
        pic: ''
      });
    },

    /**滑动更改图片 */
    preImg() {// 上一张
      this.carImgIndex = Math.max(0, --this.carImgIndex);
    },
    nextImg() {// 下一张
      this.carImgIndex = Math.min(this.carImgsNum - 1, ++this.carImgIndex);
    },

    /**
     * 
     */
    btnAct(name) {
      console.log('worksdetail-btnAct: ' + name);
      this.funs[name]();
    },
    /**返回上一页 */
    goback() {
      this.$router.go(-1);
    },

    imgClick(e) {
      console.log(e)
      if(e.button == 2){
        alert("你点了右键");
      } else if(e.button == 0){
        alert("你点了左键");
      } else if(e.button == 1){
        alert("你点了滚轮");
      }
    }
  },
  watch: {
    carImgIndex(val) {
      this.carImgShow = false;
      this.carImgShow = true;
    }
  },
  mounted() {
    this.ready();
  }
}
</script>

<style lang="less">
.dg-title { line-height: 90px; }
.flex-box { display: flex; justify-content: space-between; }
.flex-item { flex: 1; margin: 0 10px;}


.dg-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  .dg-nav-prev {

  }
  .dg-nav-next {

  }
  a {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: block;
    width: 36px;
    height: 36px;
    margin: -18px 0 0;
    overflow: hidden;
    opacity: .45;
    cursor: pointer;
    color: rgba(0,0,0,.65);
    transition: all .3s ease;
    &:before {
      display: inline-block;
      font: normal normal normal 1.4rem/1 FontAwesome,sans-serif;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-transform: translate(0);
      transform: translate(0);
      width: 100%;
      color: #333;
      content: "\F137";
      font-size: 24px!important;
      text-align: center;
      line-height: 36px!important;
      height: 36px;
    }
    &:hover {
      opacity: .9;
    }
  }
  a.dg-prev {
    left: 10px;
    &:before {
      content: "\F137";
    }
  }
  a.dg-next {
    right: 10px;
    text-align: right;
    &:before {
      content: "\F138";
    }
  }
}

</style>